<template>
	<view class="container" style="margin-bottom: 40rpx">
		<view class="bg-color5 padding-sm text-sm text-white text-center">
			提示：根据国家政策要求，发布信息前需要实名认证
		</view>
		<view class="bg-white padding">
			<view class="bg-white text-13 flex justify-between align-center">
				<view class="text-333 flex-sub text-bold"> 姓名 </view>
				<input  v-model="username" type="text" value="" class="text-13 flex-treble"
					placeholder="请输入姓名" />
			</view>
			<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
				<view class="text-333 flex-sub text-bold"> 身份证号 </view>
				<input :disabled="disabled" v-model="idCard" type="text" value="" class="text-13 flex-treble"
					placeholder="请输入身份证号" />
			</view>
			<view class="bg-white text-13 flex justify-between margin-top-sm">
				<text class="text-333 flex-sub text-bold"> 个人描述 </text>
				<textarea  v-model="description" style="height: 140rpx; padding-top: 5rpx"
					class="text-13 flex-treble" placeholder="请输入个人描述" />
			</view>
			<view class="text-13 text-333 text-bold margin-top-sm"> 上传身份证 </view>
			<view class="text-767696 bg-white margin-top text-sm">
				请上传清晰身份证件，避免信息模糊审核不通过
			</view>
			<view class="flex justify-between align-center IDcard margin-top-sm">
				<view class="flex justify-center align-center flex-direction">
					<view v-if="idCardPicBack" style="position: relative"
						class="flex justify-center align-center i-left">
						<image style="width: 100%; height: 100%" :src="idCardPicBack" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelBack" style="right: 0; top: 0; position: absolute">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-left" @click="uploadBack">
						<image :src="baseUrl + '/static/positive.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm"> 身份证人像面 </view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view v-if="idCardPicFront" style="position: relative"
						class="flex justify-center align-center i-left">
						<image style="width: 100%; height: 100%" :src="idCardPicFront" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelFont" style="right: 0; top: 0; position: absolute">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-right" @click="uploadFont">
						<image :src="baseUrl + '/static/negative.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm"> 身份证国徽面 </view>
				</view>
			</view>
		</view>
		<view class="margin-top-sm padding bg-white">
			<view class="bg-white text-13 flex justify-between align-center">
				<view class="text-333 flex-sub text-bold"> 车牌号 </view>
				<input  v-model="plateNo" type="text" value="" class="text-13 flex-treble"
					placeholder="请输入车牌号" />
			</view>
			<view class="bg-white text-13 flex justify-between align-center margin-top-sm">
				<view class="text-333 flex-sub text-bold"> 车架号 </view>
				<input  v-model="vinNo" type="text" value="" class="text-13 flex-treble"
					placeholder="请输入车架号" />
			</view>
			<view class="text-13 text-333 text-bold margin-top-sm">
				上传车辆信息
			</view>
			<view class="text-767696 bg-white margin-top-sm text-sm">
				第三方审核，请认真填写
			</view>
			<view class="flex justify-between align-center m-card margin-top">
				<view class="flex justify-center align-center flex-direction">
					<view v-if="licensePic" style="position: relative" class="flex justify-center align-center i-left">
						<image style="width: 100%; height: 100%" :src="licensePic" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DeLicense" style="right: 0; top: 0; position: absolute">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-left" @click="uploadLicense">
						<image :src="baseUrl + '/static/add.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm"> 驾驶证 </view>
				</view>
				<view class="flex justify-center align-center flex-direction">
					<view v-if="carPic" style="position: relative" class="flex justify-center align-center i-left">
						<image style="width: 100%; height: 100%" :src="carPic" mode=""></image>
						<view class="cu-tag bg-red" @tap.stop="DelCarPic" style="right: 0; top: 0; position: absolute">
							<text class="cuIcon-close"></text>
						</view>
					</view>
					<view v-else class="flex justify-center align-center i-right" @click="uploadCarPic">
						<image :src="baseUrl + '/static/add.png'" mode=""></image>
					</view>
					<view class="text-sm text-999 margin-top-sm"> 车辆信息 </view>
				</view>
			</view>
		</view>

		<button v-if="!disabled" class="text-15 text-white bg-color padding text-center btn round" @click="submit">
			确定
		</button>
		<button v-else class="text-15 text-white bg-color padding text-center btn round" @click="edit">
			编辑
		</button>
		<view v-if="!disabled" class="text-sm text-333 margin-bottom text-center">
			上传身份信息后，平台将24小时内审核
		</view>
	</view>
</template>

<script>
	import {
		appConfig
	} from "@/common/js/config.js";
	import {checkIDCard} from '@/common/js/idCard.js'
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				username: "",
				idCard: "",
				idCardPicBack: "",
				idCardPicFront: "",
				plateNo: "",
				vinNo: "",
				licensePic: "",
				carPic: "",
				description: "",
				disabled: false,
				id:''
			};
		},
		onShow() {
			const that = this;
			const userInfo = uni.getStorageSync('userInfo')
			if (userInfo.courierStatus) {
				this.disabled = true
				this.getDetail()
			}

		},
		methods: {
			async ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch((req) => {
							this.imgList.push(req.data.imgurl);
						});
					},
				});
			},
			//上传身份证反面
			uploadBack() {
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch((req) => {
							console.log(req);
							this.idCardPicBack = req.data;
						});
					},
				});
			},
			//删除身份证反面
			DelBack() {
				
				this.idCardPicBack = "";
			},
			//上传身份证正面
			uploadFont() {
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch((req) => {
							console.log(req);
							this.idCardPicFront = req.data;
						});
					},
				});
			},
			//删除身份证正面
			DelFont() {
				
				this.idCardPicFront = "";
			},
			//上传驾驶证
			uploadLicense() {
			
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch((req) => {
							console.log(req);
							this.licensePic = req.data;
						});
					},
				});
			},
			//删除驾驶证
			DeLicense() {
				
				this.licensePic = "";
			},
			//上传车辆照片
			uploadCarPic() {
				
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
						// console.log(res)
						this.$upload(res.tempFilePaths[0]).catch((req) => {
							console.log(req);
							this.carPic = req.data;
						});
					},
				});
			},
			//删除车辆照片
			DelCarPic() {
				
				this.carPic = "";
			},

			async getDetail() {
				const data = {
					userId: uni.getStorageSync("userId") || appConfig.userId,
				};
				const [err, rs] = await this.$get(this.$api.courierApplyList, data);
				if (rs) {
					console.log(rs);
					const data = rs.data.list[0];
					console.log(data);
					this.username = data.userName;
					this.idCard = data.userIdCard;
					this.description = data.description;
					this.idCardPicBack = data.idCardPicBack;
					this.idCardPicFront = data.idCardPicFront;
					this.plateNo = data.plateNo;
					this.vinNo = data.vinNo;
					this.licensePic = data.licensePic;
					this.carPic = data.carPic;
					this.id = data.id
				}
			},
			async edit(){
				const {
					username,
					idCard,
					idCardPicBack,
					idCardPicFront,
					plateNo,
					vinNo,
					licensePic,
					carPic,
					description,
				} = this;
				if (!username) {
					return this.$util.msg("姓名不能为空");
				}
			
				if (!description) {
					return this.$util.msg("个人描述不能为空");
				}
				if (!idCardPicBack) {
					return this.$util.msg("身份证人像面不能为空");
				}
				if (!idCardPicFront) {
					return this.$util.msg("身份证国徽面不能为空");
				}
				if (!plateNo) {
					return this.$util.msg("车辆号不能为空");
				}
				if (!vinNo) {
					return this.$util.msg("车架号不能为空");
				}
				if (!plateNo) {
					return this.$util.msg("车辆号不能为空");
				}
				if (!carPic) {
					return this.$util.msg("车辆照片不能为空");
				}
				
				
					const data = {
						username,
					    idCardPicBack,
						idCardPicFront,
						plateNo,
						vinNo,
						licensePic,
						carPic,
						description,
						userId: uni.getStorageSync("userId") || appConfig.userId,
						id:this.id
					};
				
					const [err, rs] = await this.$jsonPost(this.$api.updateCourier, data);
					if (rs) {
						if(rs.code==200){
							uni.showToast({
								title: '更新成功',
								duration: 1500,
								icon: 'none'
							
							})
							
							setTimeout(function() {
								uni.navigateBack()
							}, 2000)
							
						}else{
							this.$util.msg(res.data.message)
						}
					
				}
			},
			async submit() {
				console.log(111)
				const {
					username,
					idCard,
					idCardPicBack,
					idCardPicFront,
					plateNo,
					vinNo,
					licensePic,
					carPic,
					description,
				} = this;
				if (!username) {
					return this.$util.msg("姓名不能为空");
				}
				if (!checkIDCard(idCard)) {
					return this.$util.msg("身份证号格式有误");
				}
				if (!description) {
					return this.$util.msg("个人描述不能为空");
				}
				if (!idCardPicBack) {
					return this.$util.msg("身份证人像面不能为空");
				}
				if (!idCardPicFront) {
					return this.$util.msg("身份证国徽面不能为空");
				}
				if (!plateNo) {
					return this.$util.msg("车辆号不能为空");
				}
				if (!vinNo) {
					return this.$util.msg("车架号不能为空");
				}
				if (!plateNo) {
					return this.$util.msg("车辆号不能为空");
				}
				if (!carPic) {
					return this.$util.msg("车辆照片不能为空");
				}
				const data2 = {
					name: username,
					idCard,
					idCardPicBack,
					idCardPicFront,
					userId: uni.getStorageSync('userId')
				}
				const [error, result] = await this.$jsonPost(this.$api.addIdentityInfo, data2)
				if (result) {
					const data = {
						username,
						idCard,
						idCardPicBack,
						idCardPicFront,
						plateNo,
						vinNo,
						licensePic,
						carPic,
						description,
						userId: uni.getStorageSync("userId") || appConfig.userId,
					};

					const [err, rs] = await this.$jsonPost(this.$api.applyCourier, data);
					if (rs) {
						if(rs.code==200){
							uni.showToast({
								title: '请注意消息提醒，1~3个工作日有认证反馈',
								duration: 3000,
								icon: 'none'
							
							})
							
							setTimeout(function() {
								uni.navigateBack()
							}, 4000)
							
						}else{
							this.$util.msg(res.data.message)
						}
					}
				}



			},
		},
	};
</script>

<style lang="scss" scoped>
	.IDcard {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #f4f4f4;

			image {
				width: 156rpx;
				height: 156rpx;
			}
		}
	}

	.m-card {

		.i-right,
		.i-left {
			width: 334rpx;
			height: 216rpx;
			background-color: #f4f4f4;

			image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}

	.t-btn {
		padding: 18rpx 28rpx;
	}

	.btn {
		margin: 60rpx 20rpx 20rpx;
	}
</style>
